<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=yes">
    <title>学生成绩列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<!--    <link rel="stylesheet" href="/manageSystem/layui/css/layui.css" media="all">-->
    <link rel="stylesheet" href="/manageSystem/css/common.css">

    <link rel="stylesheet" href="/manageSystem/layui/extend/dtree.css">
    <link rel="stylesheet" href="/manageSystem/layui/extend/font/dtreefont.css">

    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
    <script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
</head>

<!--
    学生成绩管理不存在删除操作。
-->
<body>
<!--<h1>学生成绩列表</h1>-->
<!--
<div class="myadmin-body">
    &lt;!&ndash;顶部&ndash;&gt;
    <div class="form-search">
        <label>学号</label>
        <div class="layui-inline">
            <input class="layui-input" name="studentId" id="studentId" autocomplete="off">
        </div>
        <label>科目</label>
        <div class="layui-inline" style="width: 186px">
            <div class="layui-input-block" style="margin-left: 0">
                <select class="layui-input" id="score-select" name="score" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="0">语文</option>
                    <option value="1">数学</option>
                    <option value="2">英语</option>
                    <option value="3">其他</option>
                </select>
            </div>
        </div>
        &lt;!&ndash;        点击后，重载表格。&ndash;&gt;
        <button lay-submit="" data-type="reload" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon layui-icon-search"></i>
        </button>
    </div>
</div>
-->
<div class="layui-header" style=" top: 1vh;">
    <div class="layui-fluid ew-console-wrapper">
        <!--班级-->
        <button class="layui-btn" id="className" style="margin-top: 2vh; margin-left: 10vw">
            <span>请选择班级</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
    </div>
</div>
<div class="layui-body" style="width:96vw;left: 2vw; top: 2vh;" hidden>
    <!--表格的标记-->
    <table class="layui-hide" id="student-score-table"></table>
</div>
</body>
<!--新增按钮-->
<script type="text/html" id="toolbar">
    <button type="button" id="add-student-score" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add"
            style="float: left">
        <i class="layui-icon layui-icon-addition"></i>
        新增
    </button>
    <!--    <span id="user-text" style="color: #F04949;font-size: 5px;float: right" onload="">注：排序只在可显示的数据中进行排序</span>-->
</script>

<!--编辑和删除按钮-->
<script type="text/html" id="column-toolbar">

    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs edit" lay-event="edit">
        <i class="layui-icon layui-icon-edit" title="编辑"></i>
        编辑
    </button>
<!--

    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete" title="删除"></i>
        删除
    </button>

-->

</script>

<script src="/manageSystem/js/jquery.js"></script>
<!--<script src="/manageSystem/layui/layui.js" charset="utf-8"></script>-->
<script src="/manageSystem/js/common.js"></script>
<!--服务器路径配置-->
<script src="/js/myWebConfig.js"></script>
<!--同异步-->
<script>
    $.ajaxSettings.async = true;   //恢复异步执行
    // 表格 科目列表。
    var subjectsList = {}
</script>

<!--优化字体在屏幕小于 500 的情况下出现遮挡的问题。-->
<script>

    // 页面字体的判断标识。
    // 是否第一次大于 500 ？
    let ones = 0

    // 初始判断当前页面，若大于 500 则显示提示。小于则不显示。
    function addText() {
        // function text(){
        //     alert("已经执行")
        // console.log("当前窗口的宽度：" + document.body.clientWidth)
        //
        if (document.body.clientWidth > 500) {
            // 如果是第一次。
            if (ones === 0) {
                $("#add-student-score").after("<span id=\"user-text\" style=\"color: #F04949;font-size: 5px;float: right\" onload=\"\">注：排序只在可显示的数据中进行排序</span>")
                ones++
            }
            // $("#user-text").attr("hidden","hidden")
        } else {
            ones = 0;
            $("#add-student-score").next().remove();
        }
    }

    addText()

    // 当页面改变时，会自动调用该函数。注意，function 是必须的，不写会不执行。
    window.onresize = function () {
        addText()
    }
</script>
<!--
    需求文档说明：
    学号和科目是搜索条件。
    一个表格，从指定url中获取数据，并回传。分页。新增。修改。删除。
-->
<script>
    function initStudentScore(selectClass){
        layui.config({
            base: '/manageSystem/layui/extend/'      // 你存放新模块的目录，注意，不是 layui 的模块目录
        })

            /**
             * 加载模块
             * 方法：layui.use([mods], callback)
             *      参数 mods：如果填写，必须是一个 layui 合法的模块名（不能包含目录）。
             *              从 layui 2.6 开始，若 mods 不填，只传一个 callback 参数，则表示引用所有内置模块。
             *      参数 callback：即为模块加载完毕的回调函数。
             *              从 layui 2.6 开始，该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作
             *
             */
            .use(['table', 'element', 'form', 'dtree'], function () {
                // 表格
                var table = layui.table;
                //分页
                var $ = layui.$;

                // 动态列数据
                let dynamicColumnData = new Array();

                // 获取科目数。
                // webUrl + studentsDataPrefix + "/getScoreList/111"

                // 数据列表中的核心数据请求。
                // 初始化树
                // 表格数据函数【有表格数据，表格信息数据】
                // 备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作.
                table.render({
                    // id: 'testReload',   // 用于重载表单。
                    id: 'studentScoreReload',   // 用于重载表单。
                    elem: '#student-score-table',    //指定原始表格元素选择器（推荐id选择器）。在指定id后面添加一个动态表格
                    // 表格行数据来源
                    // 表格数据。【从服务器获取信息,】
                    // 包含的数据信息，有 表格信息，和总记录条数。
                    url: webUrl + studentsDataPrefix + "/getStudentAndSubjectScoreList/"+selectClass+"/100",
                    // url: webUrl + studentsDataPrefix + "/getStudentAndSubjectScoreList/"+selectClass,
                    toolbar: '#toolbar',    // 点击“新增”会弹出来的动态页面。
                    page: true, //开启分页
                    loading: true,  // 显示加载
                    // 表头
                    // 当前动态列，，不使用layUI自带url请求，
                    // cols: [
                    //     dynamicColumnData
                    // ],
                    cols: [ //表头
                        [
                            // {type: 'checkbox'},
                            {type: 'numbers', title: '序号', width: 60},

                            {field: 'studentId', title: subjectsList[0], align: 'center', minWidth: 150, sort: true},
                            {field: 'studentName', title: subjectsList[1], align: 'center', minWidth: 100},
                            {field: 'className', title:  subjectsList[2], align: 'center', minWidth: 200},
                            {field: 'subjectsScore1', title:  subjectsList[3], align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore2', title:  subjectsList[4], align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore3', title:  subjectsList[5], align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore4', title:  subjectsList[6], align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore5', title:  subjectsList[7], align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore6', title:  subjectsList[8], align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore7', title:  subjectsList[9], align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore8', title:  subjectsList[10], align: 'center', minWidth: 200, sort: true},

                            {title: '操作', align: 'center', toolbar: '#column-toolbar', width: 120}
                        ]
                    ],
                    // 解决 limit 失效问题。
                    // 对回调的信息进行处理。
                    parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                        console.log("表格回调函数：")
                        console.log(res)
                        console.log(res.data)
                        // console.log("长度：" + res.data.length)

                        let arr = []
                        let subjectsScoreList = []

                        // 动态添加，不显示表头。
                        // dynamicColumnData.push({type: 'numbers', title: '序号', width: 60})
                        // dynamicColumnData.push({field: 'studentId', title: subjectsList[0], align: 'center', width: 150, sort: true})
                        // dynamicColumnData.push({field: 'studentName', title: subjectsList[1], align: 'center', width: 100})
                        // dynamicColumnData.push({field: 'className', title:  subjectsList[2], align: 'center', width: 200})

                        for (let i = 0; i < res.data.length; i++) {
                            // 备份
                            subjectsScoreList = res.data[i].subjectsScore
                            // 删除
                            delete res.data[i].subjectsScore

                            //科目分数格式转换。
                            for (let j = 0; j < subjectsScoreList.length; j++) {
                                // 添加
                                arr[j] = "subjectsScore"+(j+1)
                                res.data[i]["subjectsScore"+(j+1)] = subjectsScoreList[j]
                            }
                        }
                        // // 动态添加 列【科目名称】
                        // for (let j = 0; j < subjectsScoreList.length; j++) {
                        //     // 动态添加 列【科目名称】
                        //     dynamicColumnData.push({
                        //         field: 'subjectsScore' + (j + 1),
                        //         title: subjectsList[3 + j],
                        //         align: 'center',
                        //         width: 200,
                        //         sort: true
                        //     })
                        // }
                        // dynamicColumnData.push({title: '操作', align: 'center', toolbar: '#column-toolbar', width: 120})

                        // 只有表头隐藏。表数据还会空。
                        // $(".layui-table-box").find("[data-field='subjectsScore8']").css("display","none");

                        console.log("数组内容：")
                        console.log(res.data)
                        console.log(arr)
                        console.log(subjectsList)
                        // console.log(dynamicColumnData)

                        // 存入当前班级,科目列表。
                        window.sessionStorage.setItem("className", res.data[0].className)
                        // 设置表头信息，下标 3 开始为表格的科目名称。
                        window.sessionStorage.setItem("subjectNames", JSON.stringify(subjectsList))

                        var result;
                        if (this.page.curr) {
                            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                        } else {
                            result = res.data.slice(0, this.limit);
                        }

                        // 对回传的 分数进行格式转换。


                        return {
                            "code": res.code,       //解析接口状态
                            "msg": res.msg,         //解析提示文本
                            "count": res.count,     //解析数据长度
                            "data": result          //解析数据列表
                        }
                    },
                    // 回传结果，当前页数，总条数。
                    done:function(res,curr,count){

                    }
                });

                // 工具条点击事件
                // 点击“新添”按钮时会出现的页面。 --- 缺 ajax 请求。
                table.on('toolbar', function (obj) {
                    var data = obj.data;
                    var event = obj.event;

                    if (event === 'add') {

                        // 如果屏幕宽度 < 500.则全屏展示。
                        if (document.body.clientWidth < 680) {
                            // alert("当前屏幕宽度" + document.body.clientWidth)
                            layer.open({
                                // 点击"新添"。
                                content: "/manageSystem/view/score/score-add.html",
                                title: "新增学生成绩",
                                area: ['100%', '100%'], //宽高
                                type: 2,
                            });
                        } else if (document.body.clientWidth < 1000) {
                            layer.open({
                                // 点击"新添"。
                                content: "/manageSystem/view/score/score-add.html",
                                title: "新增学生成绩",
                                area: ['70%', '85%'], //宽高
                                type: 2,
                                maxmin: true,
                                shadeClose: true    //屏蔽浏览器滚动条
                            });
                        } else {
                            layer.open({
                                // 点击"新添"。
                                // content: "/view/user/user-add11.html",
                                content: "/manageSystem/view/score/score-add.html",
                                title: "新增学生成绩",
                                area: ['40%', '85%'], //宽高
                                type: 2,
                                maxmin: true,
                                shadeClose: true    //屏蔽浏览器滚动条
                            });
                        }
                    }
                });

                // 行点击事件 【编辑事件】
                table.on('tool', function (obj) {
                    var data = obj.data;
                    var event = obj.event;
                    // 修改
                    if (event === 'edit') {
                        edit(data);
                    }
                });

                // 编辑用户信息。
                function edit(data) {
                    console.log("data：")
                    console.log(data)
                    // 存储
                    // 把信息存储到 sessionStorage 中。
                    // 当前点击的学生的分数情况。
                    window.sessionStorage.setItem("studentScoreInfo", JSON.stringify(data) );// 必须先把对象转为string。否则再次转 object 会报错。
                    // 如果屏幕宽度 < 500.则全屏展示。
                    if (document.body.clientWidth < 680) {
                        layer.open({
                            content: "/manageSystem/view/score/score-update.html",
                            title: "编辑",
                            area: ['100%', '100%'],
                            type: 2,
                            maxmin: true,
                            shadeClose: true,
                            end: function () {
                                table.reload('studentScoreReload');
                            }
                        });
                    } else if (document.body.clientWidth < 1000) {
                        layer.open({
                            content: "/manageSystem/view/score/score-update.html",
                            title: "编辑",
                            area: ['70%', '85%'],
                            type: 2,
                            maxmin: true,
                            shadeClose: true,
                            end: function () {
                                table.reload('studentScoreReload');
                            }
                        });
                    } else {
                        layer.open({
                            content: "/manageSystem/view/score/score-update.html",
                            title: "编辑",
                            area: ['40%', '85%'],
                            type: 2,
                            maxmin: true,
                            shadeClose: true,
                            end: function () {
                                table.reload('studentScoreReload');
                            }
                        });
                    }
                }
            });
    }
</script>

<script>
    layui.use('dropdown', function() {
        var dropdown = layui.dropdown

        //选择班级
        dropdown.render({
            elem: '#className' //可绑定在任意元素中，此处以上述按钮为例
            , data: JSON.parse(window.sessionStorage.getItem("collegeInfo"))
            /*, data: [{
                title: '人工智能学院'
                , id: 24
                /!*子菜单*!/
                , child: [{
                    title: '物联网应用技术'
                    , id: '01'
                    /!*子菜单*!/
                    , child: [{
                        title: '2019'
                        , id: 19
                        /!*子菜单*!/
                        , child: [{
                            title: '2019级物联网应用技术A班'
                            , id: '24190101'
                        }, {
                            title: '2019级物联网应用技术B班'
                            , id: '24190102'
                        }, {
                            title: '2019级物联网应用技术C班'
                            , id: '24190103'
                        }]
                    }, {
                        title: '2020'
                        , id: 20
                        /!*子菜单*!/
                        , child: [{
                            title: '2020级物联网应用技术A班'
                            , id: '202401'
                        }, {
                            title: '2020级物联网应用技术B班'
                            , id: '202402'
                        }, {
                            title: '2020级物联网应用技术C班'
                            , id: '202403'
                        }]
                    }, {
                        title: '2021'
                        , id: 21
                        /!*子菜单*!/
                        , child: [{
                            title: '2021级物联网应用技术A班'
                            , id: '212401'
                        }, {
                            title: '2021级物联网应用技术B班'
                            , id: '212402'
                        }, {
                            title: '2021级物联网应用技术C班'
                            , id: '212403'
                        }]
                    }]
                }, {
                    title: '电子信息技术'
                    , id: 52
                }]
            }]*/
            , id: 'className'
            //菜单被点击的事件
            , click: function (obj) {
                console.log("user-list：页面被点击");
                console.log(obj);
                console.log(obj.id);
                // 封装当前点击的班级id。
                window.sessionStorage.setItem("classId", obj.id.substring(0,2) )
                console.log(obj.id.substring(0,2));

                $.ajaxSettings.async = false;   //取消异步执行
                // 获取科目名。
                $.get(webUrl+studentsDataPrefix+"/getScoreList/"+obj.id.substring(0,2),function (res) {
                    // console.log("回传的数据：")
                    // console.log(JSON.parse(res))
                    // console.log(JSON.parse(res).data.split(', '))
                    subjectsList = JSON.parse(res).data.split(', ')
                    // subjectsList = JSON.parse(res).data
                    // console.log(typeof subjectsList)
                    // console.log(subjectsList[0].split('[')[1])
                    // console.log(subjectsList[subjectsList.length-1].split(']')[0])
                    // console.log(subjectsList.length)
                    // 进行 [ 与 ] 的优化。
                    subjectsList[0]                      = subjectsList[0].split('[')[1]
                    subjectsList[subjectsList.length-1]  = subjectsList[subjectsList.length-1].split(']')[0]
                    // console.log(subjectsList)
                });

                initStudentScore(obj.id)
                $.ajaxSettings.async = true;   //恢复异步执行

                // 发送请求到服务器。获取当前对象的 id 并查询该 id 的所有公共课程。
                // 班级名称
                // console.log($("#className span").text() )
                $("#className span").text(obj.title)
                layer.open({
                    type: 3,
                    time: 2000
                })
                $(".layui-body").removeAttr("hidden")
                // 显示页面
                // initPage()
                /**通过 ajax 请求获取数据，并写入。*/
                // $.ajaxSettings.async = false;   //取消异步执行
                // // $.getJSON("http://localhost:8080/getStudentsInfo", function (data) {
                // $.getJSON(webUrl+studentsDataPrefix+"/getStudentsInfo", function (data) {
                //     studentsData = data
                // });
                // $.ajaxSettings.async = true;   //恢复异步执行

                // layer.msg('回调返回的参数已显示再控制台');
            }
        });
    });
</script>
</html>